<template>
  <section class="rose_box">
    <div ref="rose" class="rose"></div>
    <span class="rose-background" ref="roseBg"></span>
    <template v-if="drawData && drawData.length">
      <span v-for="(item, index) in tipsArr" :class="`${item.class}_jiyin`"><i>{{ drawData[index][0] }}分</i><i>{{ item.name
      }}</i></span>
    </template>
  </section>
</template>

<script>
import drawRose from '@/draw/rose.js';

export default {
  props: {
    drawData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tipsArr: [
        {
          class: 'people',
          name: '换手'
        },
        {
          class: 'hand',
          name: '突破'
        },
        {
          class: 'break',
          name: '趋势'
        },
        {
          class: 'trend',
          name: '人气'
        },
        {
          class: 'short',
          name: '短期活跃'
        },
        {
          class: 'big',
          name: '大单'
        },
        {
          class: 'rise',
          name: '缩量上涨'
        },
        {
          class: 'fenshi',
          name: '分时'
        },
      ]
    }
  },
  watch: {
    drawData() {
      this.$refs.rose && drawRose(this.$refs.rose, this.$refs.roseBg, this.drawData);
    },
  },
};
</script>
<style lang="less" scoped>
.rose_box {
  height: 400px;
  position: relative;
  margin-top: 32px;

  i {
    font-family: PingFangSC-Regular;
    font-style: normal;
  }

  .rose {
    width: 686px;
    height: 400px;
    background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/5034f9c2-bc3e-449a-b5d1-fe0d0bb208b0.png');
    background-size: 84% 88% !important;
    background-position: center;
    background-repeat: no-repeat;
  }

  .rose-background {
    position: absolute;
    display: block;
    border-radius: 100%;
    background-color: #fff;
    left: 50%;
    top: 50%;
    z-index: 9999;
  }

  .people_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: right;
    right: 0;
    top: 0;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #6e61ff;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }

  .hand_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: right;
    right: 0;
    top: 0.62rem;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #42d780;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }

  .break_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: right;
    right: 0;
    top: 1.22rem;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #58b9ff;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }

  .trend_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: right;
    right: 0;
    top: 1.8rem;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #5aeee2;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }

  .short_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: left;
    left: 0;
    bottom: 0.26rem;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #ff5866;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }

  .big_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: left;
    left: 0;
    bottom: 1.3rem;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #ff8a50;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }

  .rise_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: left;
    left: 0;
    bottom: 1.9rem;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #ffae3d;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }

  .fenshi_jiyin {
    position: absolute;
    height: 0.52rem;
    width: 2rem;
    text-align: left;
    left: 0;
    top: 0.06rem;
    line-height: 0.26rem;

    i:nth-child(1) {
      vertical-align: top;
      line-height: 0.24rem;
      color: #c56ee2;
      font-size: 0.24rem;
      display: block;
      height: 0.24rem;
    }

    i:nth-child(2) {
      vertical-align: bottom;
      line-height: 0.22rem;
      color: #323232;
      font-size: 0.22rem;
      display: block;
      height: 0.22rem;
      margin-top: 0.04rem;
    }
  }
}</style>
